<template>
  <div class="info">
    <el-row>
      <el-col :span="3" style="text-align: right;">
        <el-icon><CircleCheck /></el-icon>
      </el-col>
      <el-col :span="16" style="height: 104px;">
        <div style="line-height: 52px">订单提交成功！去付款咯~</div>
        <div style="line-height: 52px">请在0 小时 14分内完成付款超时后将取消订单</div>
      </el-col>
      <el-col :span="5" style="height:104px; line-height: 104px; text-align: right">
        应付总额:<span class="total">￥ {{total.toFixed(2)}}</span>元
      </el-col>
    </el-row>
    <div class="info">
      <el-collapse>
        <el-collapse-item title="订单详情" name="1">
          <el-row>
            <el-col :span="2">订单号:</el-col>
            <el-col :span="10">{{order.id}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">收货信息:</el-col>
            <el-col :span="10">{{order.addrDetail}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="2">商品名称:</el-col>
            <el-col :span="10">
              <div v-for="(orderDetail, index) in order.orderDetailList" :key="index">
                {{orderDetail.goods.name}} {{orderDetail.goods.color}} {{orderDetail.goods.version}}
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <div class="pay">
    <div>

    </div>
    <div class="title">支付工具</div>
        <ul>
          <li>余额支付</li>
          <li>支付宝支付</li>
          <li>微信支付</li>
          <li>银行卡支付</li>
        </ul>

    <div>
      <el-input type="password" placeholder="请输入支付密码" v-model="payPwd" style="margin: 10px 10px; width:200px;" />
      <el-button type="danger" size="large" @click="pay">支付</el-button>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router';
import {useRouter} from "vue-router";
import orderApi from "@/api/orderApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {CircleCheck, Select} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
//保存订单的信息
const order = ref({});
//总金额
const total = ref(0);
const payPwd = ref('');
//根据订单id查询相关信息 地址 商品
const getOrder = () => {
  //获取路径上订单id
  const orderId = route.query.orderId;

  //根据订单id查询相关的信息 地址 商品
  orderApi.selectById(orderId)
      .then(resp => {
            if (resp.code == 10000){
              order.value = resp.data
              for (let orderDetailElement of order.value.orderDetailList) {
                total.value += orderDetailElement.price * orderDetailElement.count
              }
            }else {
              ElMessage.error(resp.msg);
            }
      })

}
//支付
const pay = ()=> {
  orderApi.pay({
    orderId: route.query.orderId,
    payPwd: payPwd.value
  }).then(resp => {
    if (resp.code == 10000) {
      ElMessage.success(resp.msg);
      router.push("/user/orderList")
    }else {
      ElMessage.error(resp.msg)
    }
  })
}
getOrder()
</script>

<style scoped>
.info ,.pay{
  margin-top: 30px;
  background-color: #fff;
  padding: 30px;
}
.info .el-icon {
  font-size:100px;
  color: #83C44EFF;
}
.info .total {
  font-size: 18px;
  font-weight: bold;
  color: var(--theme-color);
}
.pay .title {
  font-weight: bold;
  font-size: 18px;
}

.pay ul li {
  float:left;
  border: 2px solid #aaa;
  height: 40px;
  line-height: 40px;
  margin: 10px 10px;
  padding: 0 10px;
  cursor: pointer;
}
.pay ul li:hover{
  float:left;
  border: 2px solid var(--theme-color);
  height: 40px;
  line-height: 40px;
  margin: 10px 10px;
  padding: 0 10px;
  cursor: pointer;
}
.pay ul li ::selection{
  float:left;
  border: 2px solid var(--theme-color);
  height: 40px;
  line-height: 40px;
  margin: 10px 10px;
  padding: 0 10px;
  cursor: pointer;
}
</style>